<template>
  <div class="section-container">
    <div class="section-title">
      接口日志
    </div>
    <div class="section-actions">
      <div class="sections-left">
        <SearchCmp v-if="searchCmpArray.length" :searchCmpArray="searchCmpArray" :searchForm="queryData" @onSubmit="handleSearch" />
      </div>
    </div>
    <div class="table-box">
      <RuifoxTable 
        :loading="tableLoading" 
        :default-index="true" 
        :default-checkbox="false" 
        v-model:tableData="tableData" 
        v-model:fieldList="fieldList">
        <template #requestTime="{ element }">
          <span>{{ dayjs(element.requestTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
        </template>
        <template #requestBody="{ element }">
          <el-tooltip
            effect="dark"
            placement="top"
            :show-after="100"
            :enterable="true"
            :max-width="400"
          >
            <template #content>
              <pre class="request-body-tooltip">{{ formatJson(element.requestBody) }}</pre>
            </template>
            <span class="request-body-text">{{ truncateText(element.requestBody) }}</span>
          </el-tooltip>
        </template>
      </RuifoxTable>
      <div class="header-page">
        <PaginationView
          :total="queryData.total"
          :pageSize="queryData.pageSize"
          :currentPage="queryData.currentPage"
          :canChoose="false"
          @currentChange="handleCurrentChange"
          @changeSize="handleSizeChange"
          @refreshList="getTableData"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { selectRequestLogPage } from '@/api/logs'
import dayjs from 'dayjs'
import { tableList as mixTable } from '@ruifox-cms/utils'

// 使用mixTable混入
const {
  queryData,
  tableData,
  tableLoading,
  getTableData,
  handleSearch,
  handleCurrentChange,
  handleSizeChange
} = mixTable({
  getListApi: selectRequestLogPage
})

// 表格字段配置
const fieldList = ref([
  {
    title: '用户名',
    name: 'name'
  },
  {
    title: 'IP地址',
    name: 'ip'
  },
  {
    title: '接口地址',
    name: 'url'
  },
  {
    title: '请求时间',
    name: 'requestTime'
  },
  {
    title: '请求体',
    name: 'requestBody'
  }
])

// 搜索条件配置
const defaultQueryData = reactive({
  account: '',
  startTime: '',
  endTime: ''
})
Object.assign(queryData, defaultQueryData)

const searchCmpArray = ref([
  { label: '操作用户', key: 'account' }
])

// 添加处理 requestBody 的工具函数
const truncateText = (text) => {
  if (!text) return '-'
  return text.length > 50 ? text.substring(0, 50) + '...' : text
}

const formatJson = (jsonString) => {
  try {
    if (!jsonString) return '-'
    const obj = typeof jsonString === 'string' ? JSON.parse(jsonString) : jsonString
    return JSON.stringify(obj, null, 2)
  } catch (e) {
    return jsonString
  }
}

onMounted(() => {
  handleSearch()
})
</script>

<style scoped lang="scss">
.request-body-text {
  cursor: pointer;
  color: #409eff;
  &:hover {
    text-decoration: underline;
  }
}

.request-body-tooltip {
  margin: 0;
  padding: 8px;
  background-color: #1c1c1c;
  border-radius: 4px;
  max-height: 400px;
  overflow: auto;
  font-family: monospace;
  white-space: pre-wrap;
  word-break: break-all;
}

:deep(.el-tooltip__popper) {
  max-width: 600px !important;
  background-color: #1c1c1c !important;
}
</style>
